<script setup lang="ts">
import router from '@/router'
import type { SetterData, SetterJsonData } from '@/types/Setter'
import { onMounted } from 'vue'
import { ref } from 'vue'
const datas = ref<SetterJsonData[]>([
  {
    title: '播放与下载',
    data: [
      { left: '在线播放音质', right: '无损音质', arrow: true },
      { left: '定时关闭', arrow: true },
    ],
  },
  {
    title: '账号与隐私',
    data: [
      { left: '个人资料修改', arrow: true },
      { left: '隐私设置', arrow: true },
      { left: '系统设置', arrow: true },
      { left: '注销账号', arrow: true },
      { left: '青少年模式', right: '未开启', arrow: true },
    ],
  },
  {
    title: '使用相关',
    data: [
      { left: '使用帮助', arrow: true },
      { left: '意见反馈', arrow: true },
      { left: '清除缓存', right: '927.90M', arrow: true },
    ],
  },
  {
    title: '关于',
    data: [
      { left: '关于汽水音乐', arrow: true },
      { left: '音乐人中心', right: '认证成为音乐人', arrow: true },
      { left: '会员中心', arrow: true },
      { left: '用户协议', arrow: true },
      { left: '隐私政策', arrow: true },
      { left: '应用权限', arrow: true },
      { left: '个人信息收集清单', arrow: true },
      { left: '第三方信息共享清单', arrow: true },
    ],
  },
])

onMounted(() => {
  // 既然vant的样式这么难改，那就使用document 来修改
  document.querySelectorAll('.van-cell__title').forEach((item)=>{
    (item as HTMLElement).style.backgroundColor = 'transparent'
  })
  document.querySelectorAll('.van-cell__value').forEach((item)=>{
    (item as HTMLElement).style.backgroundColor = 'transparent'
  })
  document.querySelectorAll('.right').forEach((item)=>{
    (item as HTMLElement).style.backgroundColor = 'transparent'
  })
})

const onLogout = ()=>{
  console.log('退出登录')
}

</script>

<template>
  <!-- nav -->
  <van-nav-bar class="nav-bar" left-arrow @click-left="router.go(-1)" safe-area-inset-top>
    <template v-slot:left>
      <span class="iconfont icon-fanhui back"></span>
    </template>
    <template v-slot:title>
      <div class="my-title">
        <span class="title-txt">设置</span>
      </div>
    </template>
  </van-nav-bar>

  <div v-for="item in datas" :key="item.title">
    <div class="cell-title"> {{ item.title }}</div>
    <van-cell-group inset >
      <van-cell :border="false" is-link v-for="data in item.data" :key="data.left">
        <template #title>
          <span class="left">{{ data.left }}</span>
        </template>
        <template #value v-if="data.right">
          <span class="right">{{ data.right }}</span>
        </template>
      </van-cell>
    </van-cell-group>
  </div>

  <div class="logout" @click="onLogout">
    退出登录
  </div>
  <div class="copyright" >
    汽水音乐 version 8.7.0
  </div>
  <van-safe-area-bottom></van-safe-area-bottom>
</template>

<style lang="scss" scoped>
.back {
  color: #fff;
  font-size: 5vw;
  background-color: transparent;
}

.nav-bar {
  height: 12vw;
  background-color: transparent;
  border-bottom: none;
  /* 去除底部边框 */
}

.van-hairline--bottom:after {
  border-bottom-width: 0;
}

.van-hairline--bottom:after {
  border-bottom-width: 0;
}

.my-title {
  background-color: transparent;
}

.title-txt {
  color: #fff;
  font-size: 5vw;
  background-color: transparent;
}

:deep(.van-cell__title) {
  .left {
    background-color: transparent;
    font-size: 5vw;
    line-height: 5vw;
    color: #fff;
  }

  .right {
    font-size: 4vw;
    line-height: 4vw;
    color: #666;
  }
}


:deep(.van-icon-arrow:before ){
  background-color: #333;
  font-size: 4vw;
}

.van-cell {
  background-color: #333;
}

.cell-title {
  color: #666;
  padding: 4vw 4vw;
  font-size: 3vw;
}

.logout {
  color: red;
  font-size: 5vw;
  height: 20vw;
  width: 100%;
  text-align: center;
  line-height: 20vw;
}

.copyright {
  width: 100%;
  height: 10vw;
  color: #666;
  font-size: 3vw;
  text-align: center;
}
</style>